<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>知果汇</title>
    <link href="_CSS_/bootstrap.min.css" rel="stylesheet">
    <link href="_CSS_/simple-line-icons.css" rel="stylesheet">
    <link href="_CSS_/font-awesome.min.css" rel="stylesheet">
    <link href="_CSS_/jasny-bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="_CSS_/nanoscroller.css">
    <link href="_CSS_/style.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="_CSS_/jquery-ui.css">
    <!--[if lt IE 9]>
    <script src="_JS_/html5shiv.min.js"></script>
    <script src="_JS_/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        body {
            background-color: #ffffff;
            min-width: 600px;
        }

        .row {
            margin-left: 0px;
            margin-right: 0px;
            min-width: 600px;
        }

        .radio-box {
            display: inline-block;
            width: 64px;
        }

        .formControls {
            padding-right: 50px;
            position: relative;
        }

        .textarea {
            height: 100px;
            resize: none;
            font-size: 14px;
            padding: 4px;
        }

        .textarea-numberbar {
            position: absolute;
            right: 70px;
            bottom: 5px;
            z-index: 1;
            margin-bottom: 0;
        }

        .upload-btn {
            width: 290px;
            height: 200px;
            margin: 0;
            border: 1px solid #a9a9a9;
        }

        .upload-btn img {
            display: block;
            width: 79px;
            height: 72px;
            margin-top: 60px;
            margin-left: 109px;

        }

        .upload-btn input {
            position: absolute;
            top: 0;

            margin: 0;
            width: 290px;
            height: 200px;
            border: none;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .upload-img {
            width: 290px;
            height: 200px;
        }

        .upload-img p {
            width: 290px;
            margin-top: -50px;
            text-align: center;
        }

        .img-info img {
            width: 290px;
            height: 200px;
        }

        .file-panel {
            position: absolute;
            display: none;
            width: 290px;
            height: 200px;
            top: 0;
            overflow: hidden;
            z-index: 300;
        }

        .cancel {
            width: 290px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .table-btn, .table-btn:hover, .table-btn:focus {
            color: #ffffff;
        }
    </style>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-admin-add" method="post" enctype="multipart/form-data">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" placeholder="视频名称" id="title" name="title">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">类别：</label>
            <div class="formControls col-xs-8 col-sm-9">
				    <span class="select-box">
						<select class="select" name="type" size="1" style="width:150px;" id="news_type">

						</select>
					</span>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">上传图片：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="upload-img">
                    <div class="img-info"><img src=""/>
                        <div class="file-panel">
                            <div title="删除图片" class="cancel"><a class="btn table-btn"
                                                                style="font-size:18px;margin-top:170px;margin-left:250px;"
                                                                title="删除图片" href="javascript:;"><i
                                    class="fa fa-trash-o"></i></a></div>
                        </div>
                    </div>
                    <div class="upload-btn" style="display: none;">
                        <img src="_IMG_/upload.jpg">
                        <input type="file" name="img" id="file_img" onchange="previewImage(this,1)"
                               accept="image/gif, image/jpeg, image/png"/>
                    </div>
                    <p style="display: none;">上传图片大小不超过2M</p>
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">url：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" placeholder="url地址" id="url" name="url">
            </div>
        </div>


        <div class="row cl" style="margin-bottom: 20px;">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                <input class="btn btn-cancel radius" style="color: #ffffff;background-color: #a0a0a0;" type="button"
                       value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<script src="_JS_/jquery.min.js"></script>
<script src="_JS_/bootstrap.min.js"></script>
<script src="_JS_/jasny-bootstrap.min.js"></script>
<script src="_JS_/jquery.slimscroll.min.js"></script>
<script src="_JS_/jquery.nanoscroller.min.js"></script>
<script src="_JS_/metismenu.min.js"></script>
<script src="_JS_/float-custom.js"></script>
<script type="text/javascript" src="_JS_/layer/layer.js"></script>
<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/messages_zh.min.js"></script>
<script type="text/javascript" src="_JS_/jquery.form.js"></script>

<script type="text/javascript">
    var url = window.location.href;
    user_id = url.split("#")[1];
    id = url.split("#")[3];
    //banner类型
    $.ajax({
        type: "get",
        url: "{:url('api/news/government_type')}",
        dataType: 'jsonp',
        jsonp: 'callback',
        success: function (msg) {
            if (msg.code == 200) {
                for (var i = 0; i < msg.data.length; i++) {
                    var html = '<option value="' + msg.data[i].id + '">' + msg.data[i].name + '</option>';
                    $("#news_type").append(html);
                }
            }
            if (msg.code == 1000) {
                layer.msg('删除失败!', {icon: 1, time: 1000});
            }
        }
    });

    $(function () {
        postlist();
    });
    $(".btn-cancel").click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    });
    $('.img-info').hover(function () {
        $(this).find(".file-panel").show();
    }, function () {
        $(this).find(".file-panel").hide();
    });
    $(".cancel").on("click", function () {
        $('#file_img').val("");
        $(this).parents('.upload-img').find(".upload-btn").show();
        $(this).parents('.upload-img').find(".upload-img p").show();
        $(this).parents(".img-info").remove();

    });

    function postlist() {
        //新闻详情加载
        $.ajax({
            type: "get",
            url: "{:url('api/banner/sheet_detail')}",
            dataType: 'jsonp',
            'jsonp': 'callback',
            data: {'id': id},
            success: function (msg) {
                if (msg.code == 200) {
                    //编辑器准备好之后加载内容
                    $('#title').val(msg.data.title);
                    $('#url').val(msg.data.url);
                    $('.img-info').find('img').attr("src", "_SRC_/BannerSheet/" + msg.data.img_url);
                    $('#news_type').val(msg.data.type);
                }
                if (msg.code == 1000) {
                    layer.msg('获取信息不成功!', {icon: 1, time: 2000});
                }
            }
        });
    }

    /*textarea 字数限制*/
    function textarealength(obj, maxlength) {
        var v = $(obj).val();
        var l = v.length;
        if (l > maxlength) {
            v = v.substring(0, maxlength);
            $(obj).val(v);
        }
        $(obj).parent().find(".textarea-length").text(v.length);
    }

    $(function () {
        $("#form-admin-add").validate({
            rules: {
                videoname: {
                    required: true,
                    minlength: 4,
                    maxlength: 16
                },

            },
            onkeyup: false,
            focusCleanup: true,
            success: "valid",
            submitHandler: function (form) {
                $("form").ajaxSubmit({
                    type: "post",
                    url: "{:url('api/banner/sheet_edit')}",
                    dataType: "json",
                    data: {'uid': user_id, 'status': 2, 'id': id},
                    success: function (msg) {
                        if (msg.code == 200) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.newslist(1);
                            parent.layer.close(index);
                        }
                        if (msg.code == 1000) {
                            layer.msg('添加失败!', {icon: 1, time: 1000});
                        }
                    }
                });
            }
        });
    });

    var totalSize = 0;
    //绑定所有type=file的元素的onchange事件的处理函数
    $('#file_video').change(function () {
        var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
        name = file.name;
        size = file.size;
        type = file.type;
        url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片
        //$(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);
        totalSize += size;
        sizeM = (totalSize / (1024 * 1024)).toFixed(2);
        $("#info").html("总大小: " + sizeM + "MB");
        $("#video").attr("src", url);
        $(".up-btn").show();
        $(".up-progress").show();
        $(".progress-nav").show();
    });

    function upload() {
        //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
        var formData = new FormData($('form')[0]);
        //ajax异步上传
        $.ajax({
            url: "http://localhost/FMKX2.0/ht/fmkx/index.php/Home/News/news_add",  //上传地址
            type: "POST",
            data: formData,
            xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
                myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) { //检查upload属性是否存在
                    //绑定progress事件的回调函数
                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                }
                return myXhr; //xhr对象返回给jQuery使用
            },
            success: function (result) {
                $("#result").html(result.data);
                $(".up-btn").hide();
            },
            contentType: false, //必须false才会自动加上正确的Content-Type
            processData: false //必须false才会避开jQuery对 formdata 的默认处理
        });
    }

    //上传进度回调函数：
    function progressHandlingFunction(e) {
        if (e.lengthComputable) {
            var percent = e.loaded / e.total * 100;
            //上传进度
            $('#video_jd').html(percent.toFixed(2) + "%");
            $('#par').css('width', percent.toFixed(2) + '%');
        }
    }

    /* 图片预览*/
    function previewImage(obj, num) {
        var filepath = $(obj).val();
        fileObj = document.getElementById('file_img');
        value = window.URL.createObjectURL(fileObj.files[0]);
        file_size = obj.files[0].size;
        size = file_size / 1024;
        if (size > 1024 * 2) {
            $('#file_img').val("");
            layer.alert('上传图片不得大于2MB', {
                closeBtn: 0
            });
        } else {
            $(obj).parents(".upload-img").prepend('<div class="img-info"><img src="' + value + '"/><div class="file-panel"><div title="删除图片" class="cancel"><a class="btn table-btn" style="font-size:18px;margin-top:170px;margin-left:250px;" title="删除图片" href="javascript:;"><i class="fa fa-trash-o"></i></a></div></div></div>');
            $(obj).parent(".upload-btn").hide();
            $(obj).parents(".upload-img").children('p').hide();

            $('.img-info').hover(function () {
                $(this).find(".file-panel").show();
            }, function () {
                $(this).find(".file-panel").hide();

            });
            $(".cancel").on("click", function () {
                $('#file' + num).val("");
                $(this).parents('.upload-img').find(".upload-btn").show();
                $(this).parents('.upload-img').find(".upload-img p").show();
                $(this).parents(".img-info").remove();

            });
        }
    }
</script>
</body>
</html>